<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<script type="text/javascript">
	$(function() {
		$('#jsp_dg')
				.datagrid(
						{
							url : '${pageContext.request.contextPath}/userAction!datagrid.action',
							fit : true,
							border : false,
							pagination : true,
							idField : 'id',
							fitColumns : true,
							striped : true,
							loadMsg : '数据加载中...',
							sortName : 'username',
							sortOrder : 'asc',
							showHeader : true,//是否显示行的头部
							showFooter : true,//是否显示行的底部
							scrollbarSize : 0,//滚动条宽度，默认18
							singleSelect : true,//只允许选中一行
							frozenColumns : [ [ {
								field : 'id',
								title : ' id',
								width : 100,
								hidden : true
							}, {
								field : 'username',
								title : ' 姓名',
								width : 100,
								sortable : true
							} ] ],
							columns : [ [
									{
										field : 'password',
										title : '密码',
										width : 100,
										formatter : function(value, row, index) {
											return '<span title="'+value+'">'
													+ value + '</span>';
										}
									}, {
										field : 'createTime',
										title : '创建时间',
										width : 150,
										sortable : true
									}, {
										field : 'modifytime',
										title : '最后修改时间',
										width : 150,
									} ] ],
							toolbar : '#jsp_yhgl_toolbar'
						});
	});

	function searchFun() {
		$('#jsp_dg').datagrid('load',serializeObject($('#jsp_yhgl_searchForm')));
	}
	
	function append(){
		$('#jsp_yhgl_dd').dialog('open');
	}
</script>

<div class="easyui-layout" id="jsp_yhgl_layout" data-options="fit:true,border:false">
	<div data-options="region:'north',title:'查询条件',border:false" style="height:100px;">
	<form id="jsp_yhgl_searchForm">
		<table style="margin: auto;" >
			<tr align="center">
				<td><input name="name" /></td>
				<td><a href="#" class="easyui-linkbutton"
					data-options="iconCls:'icon-search',plain:true"
					onclick="searchFun();">查询用户名</a>
				</td>
			</tr>
		</table>
	</form>
	</div>
	<div data-options="region:'center',title:'查询结果'">
		<table id="jsp_dg"></table>
	</div>
</div>

<div id="jsp_yhgl_toolbar">
	<a href="#" class="easyui-linkbutton"
		data-options="iconCls:'icon-add',plain:true" style="float: left;" onclick="append();">增加</a>
		<div class="datagrid-btn-separator"></div>
	<a href="#" class="easyui-linkbutton"
		data-options="iconCls:'icon-edit',plain:true" style="float: left;">编辑</a>
	<div class="datagrid-btn-separator"></div>
	<!-- 这个是显示toolbar之间的分割竖线,调用时直接给一个jsp_yhgl_toolbar -->
	<a href="#" class="easyui-linkbutton"
		data-options="iconCls:'icon-cut',plain:true">删除</a>
</div>

<div id="jsp_yhgl_dd" class="easyui-dialog" title="添加新用户" style="width:400px;height:200px;" align="center"
        data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true,buttons:[{
				text:'保存',
				iconCls:'icon-add',
				handler:function(){
						$('#jsp_yhgl_addForm').form('submit',{
						url : 'userAction!reg.action',
						success : function(r) {
							//返回的是json字符串，不是json对象，下面两个才是对象
							console.info(r);
							var obj = jQuery.parseJSON(r);
							console.info(obj.msg);
							if (obj.success) {
								$('#jsp_yhgl_addForm input').val('');
								$('#jsp_yhgl_dd').dialog('close');
								$('#jsp_dg').datagrid('load',{});
							}
							$.messager.show({
								title : '提示',
								msg : obj.msg,
								timeout : 5000,
								showType : 'slide'
							});
						}
					});				
				}
			},{
				text:'取消',
				iconCls:'icon-cancel',
				handler:function(){
				alert('取消');
				}
			}]">
			<form id="jsp_yhgl_addForm">
       <table>
       		<tr>
       		 	<th>用户名</th>
       		 	<td><input name="username"/></td>
       		</tr>
       		<tr>
       		 	<th>密码</th>
       		 	<td><input name="password"/></td>
       		</tr>
       		<tr>
       		 	<th>创建时间</th>
       		 	<td><input name="createTime"/></td>
       		</tr>
       		<tr>
       		 	<th>最后修改时间</th>
       		 	<td><input name="modifytime"/></td>
       		</tr>
       </table>
       </form>
</div>

